<template>
	<div class="cate-tabs">
		<div class="max">
			<img :src="tabs2List[0].imgURL" >
			<p>
				<strong>{{tabs2List[0].title}}——{{tabs2List[0].msg}}</strong>
				<em>￥{{tabs2List[0].price}}</em>
			</p>
		</div>
		<div class="cate-tabs2 swiper">
			<ul class="swiper-wrapper">
				<template v-for="items in tabs2List" >
					<li v-if="items.id>1" :key="items.id" class="tabs-botm swiper-slide">
						，<article>
							<img :src="items.imgURL" >
							<aside>
								<span>{{items.city}}</span>
								<h3>{{items.title}}</h3>
								<label>{{items.msg}}</label>
								<p>￥{{items.price}}起</p>
							</aside>
						</article>
								
					</li>
					
				</template>
			
			</ul>
			
			
			
		</div>
		
		
		
		
	</div>
</template>

<script>
	import { onMounted } from 'vue';
	
	//引入Swiper的动态组件
	import Swiper , {
		Autoplay,
		EffectCoverflow,
		EffectCube,
		Pagination,
	}from 'swiper';
	
	// //3.swiper组件应用配置
	Swiper.use([Autoplay,EffectCoverflow,EffectCube,Pagination]);
	export default{
		name:'CategoryTab2',
		data(){
			return{
				tabs2List : [
					{id:1,imgURL:'tabs/tab2-4.webp',title:'长隆野生动物世界',msg:'《爸爸去哪儿》拍摄地',city:'广州出发',price:286},
					{id:2,imgURL:'tabs/tab2-1.jpg',title:'帽子峰旅游景区',msg:'有“粤北九寨沟”之美誉',city:'广州出发',price:47.6},
					{id:3,imgURL:'tabs/tab2-2.jpg',title:'长隆欢乐世界',msg:'《奔跑吧兄弟》拍摄地',city:'广州出发',price:223},
					{id:4,imgURL:'tabs/tab2-3.jpg',title:'深圳野生动物园',msg:'观赏世界各地珍禽名兽',city:'广州出发',price:99},
					{id:5,imgURL:'tabs/gx.jpg',title:'广现5日游',msg:'有“粤北九寨沟”之美誉',city:'广州出发',price:47.6},
					{id:6,imgURL:'tabs/gxs.png',title:'广现专才七日游',msg:'《奔跑吧兄弟》拍摄地',city:'广州出发',price:223},
					{id:7,imgURL:'tabs/tab2-3.jpg',title:'深圳野生动物园',msg:'观赏世界各地珍禽名兽',city:'广州出发',price:99},
				]
			}
		},
		setup(){
			onMounted( ()=>{
				new Swiper( '.cate-tabs2' , {
					slidesPerView : 3,
				})
			})
		}
	}
</script>

<style scoped>
	.max img{
		width: 100%;
		height: 100%;
		border-radius: 0.3rem 0.3rem 0rem 0;
	}
	
	.max p{
		width: 100%;
		height: 0.5rem;
		color: white;
		position: relative;
		top: -0.5rem;
		line-height: 0.5rem;
		background-color: rgba(0, 0, 0,0.5);
	}
	
	.max p em{
		margin-right: 0.2rem;
		color: rgb(230, 133, 45);
		float: right;
	}
	
	.tabs-botm img{
		width: 100%;
		height: 100%;
	}
	
	.tabs-botm h3{
		font-weight:bold;
		font-size: 0.1rem;
		padding-top: 0.2rem;
		padding-bottom: 0.1rem;
	}
	
	.tabs-botm aside label{
		display: block;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		color: rgb(178, 178, 178);
	}
	

	
	.tabs-botm p{
		color: rgb(255, 146, 54);
		display: block;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		
	}
		
	.tabs-botm ul li{
		
		width: 100%;
		height: 100%;
		
	}
	
	.tabs-botm aside{
		position: relative;
		top: -0.5rem;
	}
	
	.tabs-botm img{
		width: 95%;
		height: 100%;
		border-radius: 0.3rem;
	}
	
	.tabs-botm span{
		position: relative;
		top: -1.25rem;
		left: -0.011rem;
		color: white;
		border-radius: 0.3rem 0 0.25rem 0;
		background-color: rgba(0, 0, 0,0.8);
	}
	
	
	.cate-tabs2{
		position: relative;
		top: -0.60rem;
		left: 0.15rem;
	}
	
	
</style>